$(function () {
    /*打赏消息栏*/
    var $wrap=$(".js-msg-list").find(".m-ranking_content-wrap"),
        $ul = $(".js-msg-list").find('.m-ranking_content'),
        $li = $ul.find("li");
    //重置ul的width
    function changeUlWidth(){
        var $ul = $(".js-msg-list").find('.m-ranking_content'),
            $li = $ul.find("li");
        var ul_wh=0;
        for(var i=0;i<$li.length;i++){
            ul_wh+=$li.eq(i).width();
        }
        $ul.css({"width": ul_wh + "px"});
        // $ul.css({"left": 0, "width": ul_wh + "px"});
    }
    changeUlWidth();

    function addLi(imgsrc,userName,userAvatar,waiterName,waiterAvatar,giftName){
        var txt_imgsrc=imgsrc||"asset/images/gift/gift.png",
            txt_userName=userName||"新增的li",
            txt_userAvatar=userAvatar||"asset/images/avatar/sucai4.jpg",
            txt_waiterName=waiterName||"工号21",
            txt_waiterAvatar=waiterAvatar||"asset/images/avatar/sucai4.jpg",
            txt_giftName=giftName||"礼物名字";
        var $ul = $(".js-msg-list").find('.m-ranking_content'),
            $li = $ul.find("li");
        let li_html=`<li>
                        <p class="m-ranking_content_comment">
                            <img src=${txt_imgsrc} alt="" class="m-ranking_gift">
                            <img src=${txt_imgsrc} alt="" class="m-ranking_gift">
                            <img src=${txt_imgsrc} alt="" class="m-ranking_gift">
                            <span class="m-ranking_name">${txt_userName}</span>
                            <img class="m-ranking_avatar" src=${txt_userAvatar} alt="">
                            <span class="m-ranking_text">大官人豪掷千金，打赏</span>
                            <span class="m-ranking_name">${txt_waiterName}</span>
                            <img class="m-ranking_avatar" src=${txt_waiterAvatar} alt="">
                            <span class="g-c--orange">${txt_giftName}</span>
                            <img src=${txt_imgsrc} alt="" class="m-ranking_gift">
                            <img src=${txt_imgsrc} alt="" class="m-ranking_gift">
                            <img src=${txt_imgsrc} alt="" class="m-ranking_gift">
                        </p>
                    </li>`;
        $ul.prepend(li_html).find("li").eq(0).css("margin-left",$wrap.width());
        $li.stop( true, true ).css("margin-left", "auto");
        changeUlWidth();
        // console.log("增加一个li");
    }
    $(".js-addLi").on('click',function () {
        addLi();
    });


    function ZouMa() {
        this.maxLength = 2; //最低显示数  
        this.Timer = 100;//计时器间隔时间
        this.Ul = $(".js-msg-list").find('.m-ranking_content');
        var handId;//计时器id
        var self = this;
        this.Start = function () {
            if (self.Ul.children().length < this.maxLength) {
                self.Ul.append(self.Ul.children().clone());
                changeUlWidth();
            }

            handId = setInterval(self.Play, self.Timer);
        }
        this.Play = function () {
            var $li_first = self.Ul.children().eq(0);
            var wh_li_first = $li_first.children().eq(0).width();
            // img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
            $li_first.animate({ "marginLeft": "-=" + "10px" }, "fast", function () {
                //appendTo函数是实现走马灯一直不间断播放的秘诀。
                //目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
                var li_ml=parseInt($li_first.css("margin-left"));
                // console.log(wh_li_first+li_ml);
                if(wh_li_first+li_ml<=0){
                    $(this).stop(true,true).css("margin-left", "auto").appendTo(self.Ul);
                }
                //
            });
        }
    }
    new ZouMa().Start();
});